<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-07-17 22:12:28
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .layui-card-header {
        border: none !important
    }


    .user-list {
        height: calc(100vh - 200px);
    }

    .user-item {}

    .user-item.selected {
        background: var(--primary-hover-color);
        border: 1px solid var(--primary-color);
    }

  
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="section">
            <div class="solid">
                <div class="layui-row">
                    <div class="layui-col-md2 ">
                        <div class="p-4">
                            <div class="flex-middle justify-between">
                                <div class="layui-font-16 font-weight">场景联动</div>
                                <div>
                                    <span class="layui-icon layui-icon-add-circle"></span>
                                </div>
                            </div>
                        </div>
                        <hr class="m-0" />
                        <!-- 列表区域 -->
                        <div class="y-scroll m-4 user-list">
                            <div class="layui-card solid mb-5 user-item">
                                <div class="layui-card-header">
                                    <div class="flex-middle justify-between">
                                        <div class="card-header-name">工牌电量低于 20%告警</div>
                                        <div class="card-status  layui-font-gray layui-font-12">
                                            未启用
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-card-body layui-font-gray layui-font-12">
                                    工牌低电量告警
                                </div>

                            </div>
                            <div class="layui-card solid mb-5 user-item">
                                <div class="layui-card-header">
                                    <div class="flex-middle justify-between">
                                        <div class="card-header-name">车速超 40Km/h告警</div>
                                        <div class="card-status  layui-font-gray layui-font-12">
                                            未启用
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-card-body layui-font-gray layui-font-12">
                                    车辆超速告警

                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="layui-col-md10 solid-left">
                        <div class="p-4">
                            <div class="flex-middle justify-start">
                                <div class="layui-font-16 font-weight">
                                    车速超 40Km/h告警
                                      <button type="button" class="layui-btn layui-btn-xs layui-btn-normal layui-bg-gray">未启用</button>
                                </div>
                                <div>
                                </div>
                            </div>
                        </div>
                        <hr class="m-0" />
                        <div class="y-scroll m-4 user-list">

                            <div class="layui-bg-gray layui-font-gray mb-5 p-5">
                                <div class="layui-row layui-col-space15">
                                    <div class="layui-col-xs6">
                                        关联事件类型：
                                        <span class="layui-font-black">车辆超速告警</span>

                                    </div>
                                    <div class="layui-col-xs6">
                                        触发条件：
                                        <span class="layui-font-black"> 车速超 40Km/h</span>
                                    </div>
                                    <div class="layui-col-xs6">
                                        场景描述：
                                        <span class="layui-font-black"> 默认配置</span>
                                    </div>
                                </div>
                            </div>


                            <div class="title-row">
                                <div class="title-left">
                                    <div class="title-info">
                                        <div class="title-line"></div>
                                        <span class="title-text">适用范围</span>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-bg-gray layui-font-gray mb-5 p-5">
                                <div class="layui-row layui-col-space15">
                                    <div class="layui-col-xs6">
                                        所属组织：
                                        <span class="layui-font-black">全部</span>

                                    </div>
                                    <div class="layui-col-xs6">
                                        业务类型：
                                        <span class="layui-font-black"> 全部</span>
                                    </div>
                                    <div class="layui-col-xs6">
                                        车辆类型：
                                        <span class="layui-font-black"> 全部</span>
                                    </div>
                                    <div class="layui-col-xs6">
                                        关联作业网格：
                                        <span class="layui-font-black"> 全部</span>
                                    </div>
                                </div>
                            </div>
                            <div class="title-row">
                                <div class="title-left">
                                    <div class="title-info">
                                        <div class="title-line"></div>
                                        <span class="title-text">适用车辆（23）</span>
                                    </div>
                                </div>
                            </div>
                            <div class="px-5 table-stripe">
                                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>



    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            util = layui.util,
            table = layui.table,
            miniAMap = layui.miniAMap;

        /******************** 事件 start ********************/
        // 地图页面返回事件
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/

      
        $(document).ready(function () {
            // 为 .user-item 添加点击事件
            $('.user-item').on('click', function () {
                // 在这里编写您希望在点击时执行的代码
                console.log('user-item 被点击了');
                // 切换选中样式
                $(this).toggleClass('selected');

                // 检查是否选中
                const isSelected = $(this).hasClass('selected');
                if (isSelected) {
                    console.log('isSelected===选中');
                } else {
                    console.log('isSelected===未选中');
                }

                // 单选模式：只保留当前选中项
                if (!$(this).hasClass('multi-select')) {
                    $('.user-item').not(this).removeClass('selected');
                }
            });
        });
        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',
            defaultToolbar: ['filter'],
            cols: [[
                { field: 'name', title: '车牌号', width: 150 },
                { field: 'sign', minWidth: 100, title: 'GPS设备编码' },
                { field: 'score', minWidth: 80, title: '所属组织' },
                { field: 'time', minWidth: 135, title: '业务类型' },
                { field: 'time', minWidth: 135, title: '车辆类型' },
                { field: 'time', minWidth: 135, title: '关联作业网格' },

            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
            size: 'lg'
        });
        // $('.user-item').each(function () {
        //     var $item = $(this);
        //     console.log('$item==', $item)
        //     var name = $item.find('label').text().toLowerCase();
        //     console.log('name==',name)
        //     if (name.includes(keyword.toLowerCase())) {
        //         $item.show();
        //     } else {
        //         $item.hide();
        //     }
        // });
        //  $(`#${checkboxId}`).on('click', function () {
        //             $(this).toggleClass('selected');
        //             const isSelected = $(this).hasClass('selected');
        //             if (isSelected) {

        //                 console.log('isSelected===选中')
        //             } else {
        //             }
        //             // 单选模式：只保留当前选中项
        //             if (!$(this).hasClass('multi-select')) {
        //                 $(`.user-item`).not(this).removeClass('selected');

        //             }
        //         });
        /******************** 搜索 end ********************/


    })
</script>